<!--
 * @Author: cheung0
 * @Date: 2021-11-21 10:18:17
-->
<template>
  <div style="padding: 10px;">
    <el-table
        :data="
        tableData
      "
        style="width: 100%"
    >
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="图片" prop="pic">
        <template slot-scope="scope">
          <div class="demo-image__preview">
            <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.pic"
                :preview-src-list="srcList"
                @click="preview(scope.row.pic)">
            </el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="描述" prop="description"></el-table-column>
      <el-table-column label="发布人" prop="myUser.userName"></el-table-column>
      <el-table-column label="联系信息" prop="contactInfo"></el-table-column>
      <el-table-column align="right">
        <template slot="header" slot-scope="scope">
          <el-input v-model="search" size="mini" placeholder="输入关键字搜索" @keyup.enter.native="submit"/>
        </template>
        <template slot-scope="scope">
          <el-button size="mini" style="margin-right: 5px">编辑</el-button>
          <el-popconfirm
              confirm-button-text="是的"
              cancel-button-text="取消"
              icon="el-icon-info"
              icon-color="red"
              title="确定删除这条发布的信息？"
              @confirm="handleDelete(scope.row.id)"
          >
            <el-button slot="reference" size="mini" type="danger"
            >删除
            </el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 10px">
      <el-pagination
          background
          layout="prev, pager, next"
          :page-count="pageCount"
          :page-size="pageSize"
          @current-change="handleCurrentChange"
          @size-change="handleSizeChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request.js";

export default {
  data() {
    return {
      tableData: [],
      pageSize: 4,
      pageCount: 1,
      dialogVisible: false,
      formLabelAlign: {},
      search: '',
      currentPage: 1,
      srcList: [],
    };
  },
  methods: {
    preview(url) {
      this.srcList.push(url);
    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      request.get("/api/message/getMessageByPage/" + val + "/4").then((res) => {
        console.log(res);
        this.tableData = res.data.dataCurrentPage;
        this.pageCount = res.data.totalPageNum;
      });
    },
    async handleDelete(id) {
      await request.delete("/api/message/delete/" + id);
      this.$notify({
        title: '成功',
        message: '删除成功！',
        type: 'success',
        duration: 3000
      });
      const response = await request.get(
          "/api/message/getMessageByPage/" + this.currentPage + "/4"
      );
      this.tableData = response.data.dataCurrentPage;
      this.pageCount = response.data.totalPageNum;
    },
    submit() {
      request.get("/api/message/getByMessageUserId/" + this.search).then(res => {
        console.log(res);
        if (res.data != null) {
          this.tableData = res.data;
          //后期需要完善查询后的分页
        } else {
          this.tableData = [];
          this.pageCount = 0;
        }
      });
    }
  },
  mounted() {
    request.get("/api/message/getMessageByPage/1/4").then((res) => {
      console.log(this.currentSize);
      console.log(res);
      this.tableData = res.data.dataCurrentPage;
      this.pageCount = res.data.totalPageNum;
    });
  },
};
</script>

<style lang="scss" scoped>

</style>
